<template >  
        <div>  
               <div class="name">{{item.name}}</div>   
               <div class="content">{{item.context}}</div>  
               <button type="button" @click="delFun">删除</button>  
        </div>  
</template>  
<script setup lang="ts">
import { inject, defineProps } from 'vue'

interface Item {
  name: string;
  context: string;
}

const fun = inject('delCommentEmit') as Function;

const props = defineProps({
  item: {
    type: Object as () => Item,
    default: () => ({} as Item),
    required: true
  },
  index: {
    type: Number,
    default:0,
    required: true
  }
})
// TODO  index定义了但 未使用
const { item, index } = props;
// 删除评论 
const delFun = () => {
  console.log('fun', index)
  fun(index);
}
</script>
